<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>归还图书页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
            text-align: left;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .controls {
            text-align: center;
        }
    </style>
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <header>
        <div class="wel" style="margin-top:10px;">
            <h3>欢迎来到强哥图书管理系统</h3>
        </div>
        <nav>
            <ul id="nav-list" style=" margin-top:19px;"></ul>
        </nav>
    </header>
        </body>
    <script>

const storedData = JSON.parse(localStorage.getItem('loginData')) || {};
console.log("storedData",storedData);
        const userRole = storedData || 'guest'; // 假设用户数据中有一个'role'字段
 console.log("userRole",userRole);
        // 获取导航列表的DOM元素
        const navList = document.getElementById('nav-list');
 
        // 创建一个函数来添加导航项
        function addNavItem(text, href) {
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = href;
            a.textContent = text;
            li.appendChild(a);
            navList.appendChild(li);
        }
 
        // 根据用户角色添加相应的导航项
        if (userRole === 'admin') {
            addNavItem('登录', 'login.html');
            addNavItem('注册', 'register.html');
            addNavItem('图书列表', 'book_list.html');
            addNavItem('归还图书', 'return_list.html');
            addNavItem('采购界面', 'purchase.html');
            addNavItem('采购清单', 'addbook_list.html');
            addNavItem('个人中心', 'personal_admin.html');
        } else if (userRole === 'user') {
            addNavItem('登录', 'login.html');
            addNavItem('注册', 'register.html');
            addNavItem('图书列表', 'book_list_B.html');       
            addNavItem('个人中心', 'personal.html');
        } else {
            addNavItem('登录', 'login.html');

        }


        getBorrowedBooks();

        function getBorrowedBooks() {
            $.ajax({
                url: "/book/getBorrowedBooks",
                type: "get",
                success: (body) => {
                    try {
                        if (body && body.code === "NOLOGIN") {
                            location.href = "login.html";
                        }
                        var result = body;
                        console.log("Response body:", body);

                        if (!result) {
                            alert("无数据或数据格式不正确");
                            return;
                        }
                        console.log("Data:", result);

                        var records = result;
                        if (records == null) {
                            return;
                        }
                        var finalHTML = "";
                        for (var record of records) {
                            finalHTML += '<tr>';
                            finalHTML += '<td  id=><input type="checkbox" name="selectBook" value="' + record.borrowId + '" id="selectBook" class="book-select"></td>';
                            finalHTML += '<td class="borrowId">' + record.borrowId + '</td>';
                            finalHTML += '<td  class="userName">' + record.userName + '</td>';
                            finalHTML += '<td class="bookName">' + record.bookName + '</td>'; 
                            finalHTML += '<td class="borrowDate">' + record.borrowDate + '</td>';
                            finalHTML += '<td class="dueDate">' + record.dueDate + '</td>';
                            finalHTML += ' <td>';
                            finalHTML += ' <div class="op">';
                            finalHTML += ' <a href="return_update.html?borrowId='+record.borrowId+'">修改</a>';
                            // finalHTML += '  <a href="javascript:void(0)" onclick="deleteBook('+record.borrowId+')">删除</a>';
                            finalHTML += ' </div></td></tr>';
                        }

                        $("tbody").html(finalHTML);

                        $(".deleteBtn").click(function () {
                            var $row = $(this).closest("tr");
                            var borrowId = $row.find(".borrowId").text();
                        });
                    } catch (error) {
                        console.error("Error processing response:", error);
                        alert("处理响应时发生错误");
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error("AJAX error:", textStatus, errorThrown);
                    alert("请求失败，请稍后再试");
                }
            });
        }

        







    </script>
  
    <div class="form-inline">
        <h2 style="text-align: left; margin-left: 680px;margin-bottom: 60px; margin-top: 20px;"><svg xmlns="http://www.w3.org/2000/svg" width="40"
                fill="#17a2b8" class="bi bi-book-half" viewBox="0 0 16 16">
                <path
                    d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" />
            </svg>
            <span>归还图书页面</span>
        </h2>
    </div>
    
    <form id="returnBook">
       
        <table id="table">
            <thead>
                <tr>
                    <td>选择</td>
                    <th>借阅ID</th>
                    <th>用户名</th>
                    <th>借阅图书名称</th>
                    <th>借阅时期</th>
                    <th>应还时期</th>
                    <!-- <th>归还时期</th>
                    <th>是否逾期</th>
                    <th>罚款金额</th>
                    <th>是否支付</th> -->
                    <th>操作</th>


                </tr>
            </thead>
            <tbody>

            </tbody>

        </table>

        <!-- <div class="controls">

            <button>提交归还信息</button>
        </div> -->
    </form>

</body>

</html>